<!DOCTYPE html>
<html>
<head>
    <title>我的跟踪</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
    <link href="/bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/javascripts/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/javascripts/jquery.cookie.js"></script>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <script type="text/javascript" src="/javascripts/bg_loc.js"></script>
    <script type="text/javascript" src="/javascripts/login.js"></script></head>


<body>
<header class="blog-header py-3 box-shadow border-bottom box-shadow">
    <div class="row justify-content-start align-items-center">
        <div class="align-items-center pr-3 ml-4">
            <a id="back" class="p-2 text-muted" href="#">返回</a>
        </div>
    </div>
</header>
<div class="m-0 text-center alert-danger">我的追踪</div>
<div class="content"></div>


</body>
<div class="text-center mt-3">
    <p style="color: #89ff98"  class="text-danger">如果本系统真正帮到了你</p>
    <p style="color: #89ff98" class="text-danger">记得打赏下哈，1块2块不嫌少，5块10块不嫌多</p>
    <p style="color: #89ff98" class="text-danger">小的去买杯奶茶喝</p>

    <img src="/images/wechat.jpg" alt="" width="300" height="auto">
    <img class="mt-3 mb-5" src="/images/alipay.jpg" alt="" width="300" height="auto">
</div>
</html>

<script type="text/javascript">

    var token = $.cookie('userToken')

    if($.cookie('userToken')){
        //token存在
        console.log('token存在')
    }else {
        //token不存在
        window.location.href='/login'
    }


    getAddressList((res)=>{
        console.log(res.data.objects)
        var html = '<ul class="list-group">';
        if(res.data.objects.length){

                for (var i in res.data.objects){
                    var  t = res.data.objects[i].trace;
                    if(t.length == 0){
                        t = '自己'
                    }
                    html += '<li class="list-group-item">' + '<p class="m-0 text-muted">' + 'NO.'+ i + '</p>' +
                        '<p class="m-0 text-danger">' + '追踪人: ' + t + '</p>'+
                        '<p class="m-0 text-success">' + '地理位置：' + res.data.objects[i].nation + '&nbsp;' + res.data.objects[i].city + '&nbsp;'+
                        '&nbsp;'+ res.data.objects[i].province + '</p>'+
                        '<p class="m-0 text-success">' + '具体位置: ' + res.data.objects[i].addr + '</p>'+
                        '<p class="m-0 text-success">' + '定位时间: ' + res.data.objects[i].created_at.replace('T',' ').replace(/\..+/, ''); + '</p>'
                        + '</li>';
                }

            html += '</ul>'
        }else {
            html +='<div class="text-center mt-5 mb-5"><p>暂无追踪</p></div>'
        }

        var oContent = $('.content');
        oContent.html(html);
    })

    // function bindHTML(data) {
    //     //->首先把页面中模板的innerHTML获取到
    //     var str = $("#menuTemplate").html();
    //
    //     //->然后把str和data交给EJS解析处理，得到我们最终想要的字符串
    //     var result = ejs.render(str, {data: data});
    //
    //     //->最后把获取的HTML放入到MENU中
    //     $(".menu").html(result);
    // }

    $('#back').click(function () {

        window.location.href='/index'
    });


</script>